<script setup>
import { onMounted, ref } from 'vue'
import { datalistApi } from '../../api/index'
import { useRouter } from 'vue-router'
const router = useRouter()
const getcurrentDate = new Date();
const list = ref([])
const pic = ref()
const show = ref(false)
const initialcurrentDate = ref()
const showBottom = ref(false) //起始日期弹窗开关
const currentDate= ref([getcurrentDate.getFullYear(), getcurrentDate.getMonth() + 1, getcurrentDate.getDate()]) //起始日期，当天日期
// 初始化日期
const timecl = function () {
    if (getcurrentDate.getMonth() + 1 < 10) {
        currentDate.value[1] = '0' + (getcurrentDate.getMonth() + 1)
    }
    if (getcurrentDate.getDate() < 10) {
        currentDate.value[2] = '0' + getcurrentDate.getDate()
    }
}


// 获取看板列表
const getdatalist = async function () {
    show.value = true
    const res = await datalistApi({
        Time: `${currentDate.value[0]}-${currentDate.value[1]}-${currentDate.value[2]}`,
    })
    console.log(res)
    if (res.data.code == 0) {
        show.value = false
        list.value = res.data.data
        pic.value = res.data.piceSum
    }
}
// 选择起日期后点击确定
const determine = function () {
    showBottom.value = false
    getdatalist()

}

// 选择起日期后点击取消
const cancellation = function () {
    currentDate.value = initialcurrentDate.value
    showBottom.value = false
}
const closeDate = function () {
    currentDate.value = initialcurrentDate.value
    showBottom.value = false
}
// 打开起始日期弹出框
const popupshow = function () {
    initialcurrentDate.value = currentDate.value
    showBottom.value = true
}


const pushAdmin = function () {
    router.push({path:'/Admin'})
}
onMounted(() => {
    timecl()
    getdatalist()
})
</script>
<template>
    <van-overlay :show="show">
        <div class="wrapper" >
            <van-loading type="spinner" />
        </div>
    </van-overlay>
<div>
    <div style="width: 100%;background-color: #EFCB7B;overflow: auto;">
        <div style="height:.8rem;margin-left:.1567rem;margin-top: .5333rem;padding: .1333rem;font-size: .4rem;margin-bottom: .2667rem;display: flex;justify-content: space-between;margin-right:.1567rem;">
            <div style="background-color: #F4DAA1;padding:.1067rem .2133rem;border-radius: .08rem;display: flex;align-items: center;justify-content: center;width: 3.6rem;">
                <span style="margin-right: .1867rem;">小时统计</span>
                <span style="margin-right: .2667rem;width: .0167rem;height: .5333rem;background-color: #000;"></span>
                <span>
                    <van-icon name="shopping-cart-o" size=".4867rem"/>
                </span>
            </div>
            <div @click="pushAdmin" style="background-color: #F4DAA1;padding:.1067rem .2133rem;border-radius: .08rem;display: flex;align-items: center;justify-content: center;width: 3.6rem;">
                <span style="margin-right: .1867rem;">产品统计</span>
                <span style="margin-right: .2667rem;width: .0167rem;height: .5333rem;background-color: #000;"></span>
                <span>
                    <van-icon name="shopping-cart-o" size=".4867rem"/>
                </span>
            </div>
        </div>
        <div style="display: flex;padding: .4rem;flex-direction: column;">
            <div style="font-size: .4rem;" >
                <span @click="popupshow">
                    <span style="height: .5333rem;line-height: .5333rem;margin-right: .09333rem;">
                    {{ currentDate[0] }}-{{ currentDate[1] }}-{{ currentDate[2] }}
                    </span>
                    <van-icon name="arrow-down" />
                </span>
            </div>
            <!-- <div style="display: flex;align-items: center;margin-top: .2667rem;">
                <span style="font-size: .4rem;margin-right: .1067rem;">总收入 :</span>
                <span style="font-size: .6rem;">¥{{ pic }}</span>
            </div> -->
        </div>
    </div>
    <div style="padding: .1867rem;background-color: #F2F3F5;">
        <div style="background-color: #fff;">
            <div style="height:.8rem;font-size: .3733rem;display: flex;align-items: center;background-color: #FAFAFA;padding: .2133rem;justify-content: space-between">
                <div>
                    {{ currentDate[1] }}月{{ currentDate[2]}}日
                </div>
                <div>
                <span style="font-size: .6rem;">¥{{ pic }}</span>
                </div>
            </div>
            <div v-for="(item,index) in list" :key="index" style="padding: .2133rem;">
                <div style="display: flex;height: 100%;justify-content: space-around;flex-direction: column;border-bottom: .0267rem solid #E5E6EB;">
                    <div style="font-size: .3733rem;font-weight: 600;margin-bottom:.2667rem;display:flex;align-items: center;justify-content: space-between">
                        <div>
                            {{item.title}}
                        </div>
                        <div>
                            <div style="font-size: .3733rem;color: #ED702D;font-weight: 600;">+{{ item.price }}</div>
                        </div>
                    </div>
                    <div :style="{'width':`${item.percent*100}%`,'height':'.5rem','max-width':'8rem','background-color':'green','margin-bottom':'.2667rem'}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 起日期 -->
    <van-popup
        v-model:show="showBottom"
        @click-overlay="closeDate"
        round
        position="bottom"
        :style="{ height: '50%' }"
        >
        <van-date-picker
                v-model="currentDate"
                title="选择日期"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="determine"
                @cancel="cancellation"
            />
    </van-popup>
</div>
    
   
</template>
<style scoped> 
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>